<template>
  <div class="main app-container">
    <div class="main-container">

      <div class="cbox">
        <el-form class="form" :model="flt" :inline="true" ref="fltForm">
          <!-- <el-row :gutter="17" class="row"> -->
            <!-- <el-col :span="5"> -->
              <el-form-item size="mini" label="部门代码：" prop="dptCode" >
                <el-input
                  clearable
                  maxlength="20"
                  v-model="flt.dptCode"
                  size="mini"
                  style="width:180px"
                ></el-input>
              </el-form-item>
            <!-- </el-col> -->
            <!-- <el-col :span="5"> -->
              <el-form-item size="mini" label="部门名称：" prop="dptName" >
                <el-input
                  clearable
                  maxlength="37"
                  v-model="flt.dptName"
                  size="mini"
                  style="width:180px"
                ></el-input>
              </el-form-item>
            <!-- </el-col> -->
            <!-- <el-col :span="5"> -->
              <el-form-item size="mini" label="上级部门：" prop="dptPredptName">
                <el-popover placement="bottom" trigger="click"  v-model="showpop">
                  <el-tree
                    style="width:300px;overflow: hidden;"
                    :data="dptList"
                    :props="defaultProps"
                    node-key="id"
                    default-expand-all
                    ref="tree"
                    @node-click="chose"
                  ></el-tree>
                  <el-input
                    class="input-text"
                    slot="reference"
                    placeholder="点击选择上级部门"
                    v-model="flt.dptPredptName"
                    size="mini"
                    style="width:180px"
                    clearable
                  ></el-input>
                </el-popover>
              </el-form-item>
            <!-- </el-col> -->
            <!-- <el-col :span="2"> -->
              <el-form-item size="mini" >
                <el-button size="mini" type="primary" @click="searchList">查询</el-button>
              </el-form-item>
            <!-- </el-col> -->
          <!-- </el-row> -->
          <el-row :gutter="10" class="row">
            <el-col :span="24">
              <el-form-item size="mini" label-width="0px">
                  <buttonName @clickEvent="clickEventDom"></buttonName>

                  <!-- <el-button size="mini" type="primary" plain v-if="isAuth('add')" @click="addNew">新增</el-button>
                  <el-button size="mini" type="primary" plain v-if="isAuth('edit')" @click="edit">编辑</el-button>
                  <el-button size="mini" type="primary" plain v-if="isAuth('del')" @click="del">删除</el-button> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table">
        <div class="inner" ref="inner">
          <el-table
            :height="maxHeight"
            style="width: 100%"
            :data="departmentList"
            :highlight-current-row="true"
            @row-click="rowClick"
            border
            :header-cell-style="{
              textAlign: 'center'
            }"
            @row-dblclick="view"
          >
            <el-table-column align="center" width="60" label="序号" :index="indexMethod" type="index"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="部门代码" prop="dptCode"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="部门名称" prop="dptName"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="上级部门" prop="dptPredptName"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="部门员工人数" prop="dptUserNum"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip label="查看部门所有员工">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.dptUserNum > 0"
                  size="mini"
                  type="primary"
                  plain
                  @click="see(scope.row)"
                >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-pagination
        class="pagination"
        small
        background
        ref="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Pagination.currentPage"
        :page-sizes="Pagination.pageSizeList"
        :page-size="Pagination.pageSize"
        :layout="Pagination.layout"
        :total="Pagination.total"
      ></el-pagination>
      <el-dialog
        width="700px"
        v-el-drag-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="showDialog"
        :visible.sync="showDialog"
        :title="operate"
      >
        <v-dialog
          :dialogmode="operate"
          :disabled="!isEditMode"
          @close="closeEdit"
          @save="saveFltInfo"
          :flt_info="currentFltInfo"
        ></v-dialog>
      </el-dialog>

      <el-dialog
        v-el-drag-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="showSeeDialog"
        :visible.sync="showSeeDialog"
        :title="operate"
      >
        <s-dialog
          :disabled="!isEditMode1"
          @close="closeEdit"
          @save="saveFltInfo"
          :flt_info="currentFltInfo"
          :userdata="usersData"
        ></s-dialog>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import VDialog from './dialog'
import SDialog from './seedialog'
import isAuth from '@/mixins/buttonAuth'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
import buttonName from '@/components/buttonName/button-name.vue'

import {
  checkDepartmentList,
  addDepartmentList,
  editDepartment,
  delDepartment,
  getSDepartment,
  checkuserList
} from '@/request/api'

export default {
  name: 'router.department',
  mixins: [resizeMixin, paginationMixin, isAuth],
  data() {
    return {
      flt: {
        dptCode: '',
        dptName: '',
        dptPredptName: '',
        dptPredptId: ''
      },
      nameData:[],
      departmentList: [],
      dptList: [],
      showpop: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      usersData: [],
      isEditMode: true,
      operate: '',
      showDialog: false,
      showSeeDialog: false,

      currentRow: {},
      currentFltInfo: {},

      roleStatus: [],
      maxHeight: -1
    }
  },
  methods: {
    // 重写的获取列表数据的方法
    getList(currentPage, pageSize, updateTotal) {
      this.clearState()
      checkDepartmentList({
        dptCode: this.flt.dptCode,
        dptName: this.flt.dptName,
        dptPredptId: this.flt.dptPredptName ? this.flt.dptPredptId : '',
        PageIndex: this.Pagination.currentPage.toString(),
        PageSize: this.Pagination.pageSize.toString()
      }).then(res => {
        this.departmentList = res.data
        updateTotal(res.total)
      })
    },
    addNew() {
      this.operate = this.DIALOG_MODE.ADD
      this.isEditMode = true
      this.currentFltInfo = {
        dptPredptName: ''
      }
      this.showDialog = true
    },
    edit() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.operate = this.DIALOG_MODE.EDIT
      this.isEditMode = true
      this.currentFltInfo = Object.assign({}, this.currentRow)
      this.showDialog = true
    },
    view(row) {
      this.operate = this.DIALOG_MODE.VIEW
      this.isEditMode = false
      this.currentFltInfo = Object.assign({}, row)
      this.showDialog = true
    },
    // 查看用户dialog
    see(row) {
      this.usersData = []
      this.operate = this.DIALOG_MODE.SEE
      this.isEditMode1 = true
      this.getUserInfo(row)
      this.showSeeDialog = true
      this.showDialog = false
    },

    closeEdit() {
      this.showDialog = false
      this.showSeeDialog = false
    },

    saveFltInfo(info) {
      switch (this.operate) {
      case this.DIALOG_MODE.ADD:
        addDepartmentList(info).then(() => {
          this.$message({
            message: '新增成功！',
            type: 'success',
            showClose: true
          })
          this.showDialog = false
          this.refreshList()
        })
        break
      case this.DIALOG_MODE.EDIT:
        editDepartment(info).then(() => {
          this.$message({
            message: '编辑成功！',
            type: 'success',
            showClose: true
          })
          this.showDialog = false
          this.refreshList()
        })
        break
      default:
        break
      }
    },
    rowClick(row) {
      this.currentRow = row
    },
    del() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除选定的数据吗?', '提示', {
        closeOnClickModal: false
      }).then(() => {
        let leta = {}
        leta['dptId'] = this.currentRow.dptId
        leta['version'] = this.currentRow.version
        delDepartment(leta).then(() => {
          this.$message({
            message: '删除成功！',
            type: 'success',
            showClose: true
          })
          this.refreshList()
        })
      })
    },
    clearState() {
      this.currentRow = {}
      this.currentFltInfo = {}
    },
    getDepartment() {
      getSDepartment().then(res => {
        this.dptList = res.data[0].dpts
        // console.log(this.dptList)
      })
    },
    chose(data) {
      // 上级部门id
      this.flt.dptPredptId = data.id
      this.flt.dptPredptName = data.name
      this.showpop = false
    },
    // 获取用户信息
    getUserInfo(row) {
      checkuserList(row).then(res => {
        this.usersData = res.data
      })
    },
    //调取父组件方法
    clickEventDom(item){
      if(item.mdlCode === 'add'){
        this.addNew()
      }else if(item.mdlCode === 'edit'){
        this.edit()
      }else if(item.mdlCode === 'del'){
        this.del()
      }
    }
  },
  components: {
    VDialog,
    SDialog,
    buttonName
  },
  mounted() {
    this.searchList()
    this.getDepartment()
    
  },
  created() {
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  position: relative;
  width: 100%;
}
.main-container {
  height: 100%;
  width: 100%;
  position: relative;
  // padding: 0 12px;
  display: flex;
  flex-direction: column;
  .form {
    width: 100%;
    flex: 0 0 auto;
    .row {
      width: 100%;
      // margin: 10px 0;
      margin-bottom: 0;
    }
  }
  .table {
    flex: 1;
    overflow: hidden;
    position: relative;
    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
}
.el-input__inner {
  height: 28px;
}
</style>
